<template>
  <div class="Operations">
    <template v-for="(item, index) in btnList" :key="index">
      <div v-if="!item.show">
        <div v-if="item.dropdownShow">
          <a-dropdown :trigger="['click']">
            <a class="ant-dropdown-link" @click.prevent >
              {{ item.btnName }} <i :class="['iconfont', item.icon]"></i>
            </a>
            <template #overlay>
              <a-menu>
                <template v-for="menuItem in item.menu" :key="menuItem">
                  <div v-auth="menuItem.componentName">
                    <a-menu-item
                      @click="menuItem.click"
                      :disabled='menuItem.disabled'
                      v-if="menuItem.show !== true"
                    > 
                    <div>
                      {{ menuItem.label }}
                    </div>
                    </a-menu-item>
                  </div>
                </template>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
        <div v-else @click="item.click">
          <div :class="`${item.disabled ? 'disabledColor' : 'btn'}`" v-auth="item.componentName">{{ item.btnName }}</div> 
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
const props = defineProps({
  btnList: Array,
});



</script>

<style lang="less" scoped>
.Operations {
  display: flex;
  align-items: center;
  .btn {
    color: var(--ant-primary-color);
    cursor: pointer;
  }
  & .btn::after{
    content: "";
    display:inline-block;
    width: 1px;
    height:12px;
    background: rgba(0,0,0,.2);
    margin:0 10px ;
  }
  &>div:last-child .btn:after{
    display: none;
  }
  .disabledColor{
    color: rgba(0,0,0,.25);
    cursor: not-allowed;
  }
  & .disabledColor::after{
    content: "";
    display:inline-block;
    width: 1px;
    height:12px;
    background: rgba(0,0,0,.2);
    margin:0 10px ;
  }
  &>div:last-child .disabledColor:after{
    display: none;
  }
}
</style>